<template>
    <div>
        <div :style="position" class="div-bgDimback" v-if="true"/>
        <div :style="[background,position]" ref="divBg" class="div-bg"/>
      </div>
</template>

<script>
export default {
    name : 'ImgBackground',
    mounted() {
      window.addEventListener('scroll', this.handleScroll)
    },
    unmounted() {
      window.removeEventListener('scroll', this.handleScroll)
    },
    created() {
      this.handleScroll();
    },
    computed: {
      position() {
        return this.$store.state.backgroundPosition
      },
      top : {
        get: function() {
          return this.$store.state.backgroundPosition.top;
        },
        set(val) {
          this.$store.commit("setBackgroundTop",val)
        }
      },  
      left : {
        get: function() {
          return this.$store.state.backgroundPosition.left;
        },
        set(val) {
          this.$store.commit("setBackgroundLeft",val)
        }
      }
    },
    methods: {
      handleScroll() {
        var scroll_height = document.documentElement.scrollTop;
        var scroll_width = document.documentElement.scrollLeft;
        if (scroll_height > 0 && scroll_height + document.documentElement.clientHeight < document.body.scrollHeight +5 ) {
          this.top = scroll_height;
        }
        if (scroll_width > 0 && scroll_width + document.documentElement.clientWidth < document.body.scrollWidth ) {
          this.left = scroll_width;
        }
        this.$forceUpdate()
      }
    },
    data() {
      return {
        background : {
          backgroundImage: "url(" + require('../static/img/background.jpg') + ")"
        },
      }
    },
}
</script>

<style lang="less" scoped>
.div-bg {
    position: absolute;
    z-index: -100;
    min-height: 100vh;
    min-width : 100vw;
    width: max-content;
    height: max-content;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-attachment: fixed;
}

.div-bgDimback {
    z-index: -99;
    background: fade(#fff,40%);
    position: absolute;
    min-height: 100vh;
    min-width : 100vw;
    width: max-content;
    height: max-content;
    background-attachment: fixed;
}
</style>